import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, Button,Stepper } from 'antd-mobile';


const Item = List.Item;
class dues extends React.Component{
  constructor(props){
    super(props);
    this.state={
      val: 2,
    }
    }

  onChange = (val) => {
    // console.log(val);
    this.setState({ val });
  }

  tohistory =()=>{
    this.props.dispatch(
      routerRedux.push({
        pathname: `/work/dues/paymenthistory`
      })
    );
  };

  render(){
    const name = '李春燕';
    const position = '所得税处支部';
    const time = '2017年08月';
    const jiaonashijian= '？';
    const jnamount= '￥45.8'
    const history='缴费历史'

    return(
      <div style={{width: '100%',height:'100%'}}>
        {/*<NavBarItem title="个人详情"/>*/}
        {/*<WhiteSpace size="xl" />*/}
        <List className="my-list">
          <Item extra={<span style={{color:'#798FFF'}} onClick={this.tohistory}>{history}</span>} style={{height:'1rem'}}>
            <div  style={{position:'absolute',top:'31%',float:'left'}}>应交金额</div>
          </Item>
          <Item >￥<span style={{fontSize: '1rem' }}>0.00</span></Item>
        </List>

        <List className="my-list">
          <Item extra={name} onClick={this.checkPhone}><span style={{color:'#A3A3A3'}}>姓名</span></Item>
          <div className="Position">
            <Item extra={position}><span style={{color:'#A3A3A3'}}>所属支部</span></Item>
          </div>
          <div className="Time">
            <Item extra={time}><span style={{color:'#A3A3A3'}}>已交纳到</span></Item>
          </div>
        </List>

        <WhiteSpace size="lg" />

        <List>
          <List.Item
            wrap
            extra={
              <Stepper
                style={{ width: '100%', minWidth: '100px' }}
                showNumber
                max={10}
                min={1}
                value={this.state.val}
                onChange={this.onChange}
              />}
          >
            交纳月数
          </List.Item>
        </List>

        <List className="my-list">
          <Item extra={jiaonashijian} onClick={this.checkPhone}><span style={{color:'#A3A3A3'}}>交纳时间:</span> <span style={{color:'#A3A3A3',fontSize:'0.3rem'}}>2017年09月-2017年11月</span></Item>
          <div className="Duesbz">
            <Item><span style={{color:'#A3A3A3'}}>党费标准:</span><span style={{color:'#A3A3A3'}}>24元/月</span></Item>
          </div>
          <div className="Zjamount">
            <Item><span style={{color:'#A3A3A3'}}>总计金额:</span><span style={{color:'#A3A3A3'}}>45.8元</span></Item>
          </div>
        </List>

        <WhiteSpace size="lg" />

        <List className="my-list">
          <Item extra={<span style={{color:'#E03B3C'}}>{jnamount}</span>} onClick={this.checkPhone} >交纳金额</Item>
        </List>

        <WhiteSpace size="lg" />

        <Button type="submit" style={{width: '80%',marginLeft:'0.65rem',backgroundColor:'#DF3031',color:'#ffffff'}}>提交</Button>
      </div>
    )
  }
}



function mapStateToProps({mine}) {//models
  return {mine}
}
export default connect(mapStateToProps)(dues);
